<template>
    <div class="vrbanner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="https://www.720yun.com/vr/867259Ou9cn">
                        <div class="vr_img">
                            <img src="/static/images/vr1.png" alt="">
                        </div>
                        <div class="vr_info">
                            <div class="vr_title">创新思维提高修养 廉洁自律贞清人生党课</div>
                            <div class="vr_txt">
                                人只有把自己融入一件事业中才能实现人生的境界
                                                宏观：国家兴旺，报效国家；实现中华民放伟大复兴
                                                微观：做好本职工作
                            </div>
                        </div>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="https://www.720yun.com/vr/867259Ou9cn">
                        <div class="vr_img">
                            <img src="/static/images/vrimg.png" alt="">
                        </div>
                        <div class="vr_info">
                            <div class="vr_title">习近平生态文明思想专题党课</div>
                            <div class="vr_txt">一、加强党对生态文明建设的全面领导二、绿水青山就是金山银山三、良好生态环境是最普惠的民生福祉四、绿色发展是发展观的深刻革命</div>
                        </div>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="https://www.720yun.com/vr/867259Ou9cn">
                        <div class="vr_img">
                            <img src="/static/images/vr3.png" alt="">
                        </div>
                        <div class="vr_info">
                            <div class="vr_title">2021年第一季度党课党史学习与思考</div>
                            <div class="vr_txt">中国共产党为什么能、马克思主义为什么行、中国特色社会主义为什么好、党员如何做</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
    name:'newsBanner',
    data(){
        return{
            
        }
    },
    mounted(){
        this.$nextTick(()=>{
            var swiper1 = new Swiper ('.vrbanner .swiper-container', {
                // loop: true,
                speed:3000,
                slidesPerView:3,
                spaceBetween:20,
                // autoplay:true,
                observer:true,
                observeParents:true,
                observeSlideChildren:true,

                // 如果需要分页器
                pagination: { 
                    el: ".swiper-pagination", 
                    dynamicBullets: true,
                    clickable: true, 
                },
                // 如果需要前进后退按钮
                navigation: { 
                    nextEl: ".swiper-button-next", 
                    prevEl:".swiper-button-prev", 
                },
            })
        })
        
    }
}
</script>
<style lang="scss" scoped>
    @import  '@/assets/css/common.scss';
    .swiper-button-next,.swiper-button-prev{
        width: 62px!important;
        height: 62px!important;
        border-radius: 10px;
        line-height: 62px;
        text-align: center;
        color: #fff;
        
        background: rgba(0,0,0,.6);
        &::after{
            font-size: 18px!important;
            font-weight: bold;
        }
    }
    .swiper-slide-next{
        transform: scale(1.15);
        transition: all .5s linear;
        border-radius: 10px;
    }
</style>